<template>
    <div class="bigbox" @click="handleclick(props.data)">
        <Aimage :src="props.data.logolinks" :number="props.data.number" />
        <div class="list">
            <div class="list-content">
                <div class="top">
                    <h4>
                        {{
                            store.$state.locale == 1
                                ? props.data.title.split(';')[0]
                                : props.data.title.split(';')[1]
                        }}
                    </h4>
                    <el-icon class="icon1" @click="cardDetail">
                        <ArrowUp v-if="expand" />
                        <ArrowDown v-else />
                    </el-icon>
                </div>
                <h4>{{ props.data.number }}</h4>
                <div v-if="expand" class="details">
                    <h5 v-for="(item, index) in detailsItem33" :key="index">
                        <span>{{ item.name }}</span>
                        <el-icon class="icon1" v-if="item.icon">
                            <Check v-if="item.icon == 1" />
                            <img
                                v-if="item.icon == 2"
                                src="@/assets/1x/1x/source9.png"
                                class="icon"
                            />
                        </el-icon>
                    </h5>
                </div>
                <h5
                    v-else
                    :style="{
                        color:
                            props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '',
                    }"
                >
                    {{ code33 }}
                </h5>
                <h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
                <h6>
                    {{
                        props.data.price
                            ? $t(i18n.global.t('home.finalofferprice'))
                            : $t(i18n.global.t('home.offerpricerange'))
                    }}
                </h6>
                <h5>{{ moment(props.data.time).format('YYYY-MM-DD HH:mm') }}</h5>
                <h6>
                    {{
                        props.data.listingDate
                            ? $t(i18n.global.t('home.CommencementofTradeDate'))
                            : $t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
                    }}
                </h6>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { size } from 'lodash';
import { ref, onMounted, computed, watch } from 'vue';
import { ipoStore } from '@/stores/ipo';
import i18n from '@/locales';
import { getCurrentInstance } from 'vue';
import logo from '@/assets/Snipaste.png';
import { useRouter } from 'vue-router';
import Aimage from './image1/index.vue';
import moment from 'moment';
const { proxy } = getCurrentInstance() as any;
const store = ipoStore();
const currentDate = ref(new Date());
const expand = ref(false);
const fontstyle = ref();
const router = useRouter();
const detailsItem = ref([
    {
        name: proxy.$t('home.DealInitiated'),
        icon: 0,
    },
    {
        name: proxy.$t('home.PublicOfferClosed'),
        icon: 0,
    },
    {
        name: proxy.$t('home.ApplicationValidated'),
        icon: 0,
    },
    {
        name: proxy.$t('home.AllotmentConfirmed'),
        icon: 0,
    },
    {
        name: proxy.$t('home.MoneySettlement'),
        icon: 0,
    },
    {
        name: proxy.$t('home.AllocationConfirmed'),
        icon: 0,
    },
    {
        name: proxy.$t('home.placingApproved'),
        icon: 0,
    },
    {
        name: proxy.$t('home.AllotmentResultsApproved'),
        icon: 0,
    },
    {
        name: proxy.$t('home.TradingStarted'),
        icon: 0,
    },
]);
const props = defineProps({
    data: {
        type: Object,
        default: function () {
            return {
                HKD: '',
                number: 0,
                price: '',
                time: '',
                title: '',
                trading: '',
                logolinks: '',
                status: 0,
                listingDate: '',
                ipoID: 0,
                tradeCurrency: '',
            };
        },
    },
});

const code22 = ref('');
onMounted(() => {
    setCodefn();
});
watch(
    props,
    (newValue: any, oldValue: any) => {
        setCodefn();
    },
    { deep: true }
);
const code33 = computed(() => {
    return {
        25: proxy.$t('home.DealInitiated'),
        30: proxy.$t('home.PublicOfferClosed'),
        35: proxy.$t('home.ApplicationValidated'),
        45: proxy.$t('home.AllotmentConfirmed'),
        50: proxy.$t('home.MoneySettlement'),
        55: proxy.$t('home.AllocationConfirmed'),
        60: proxy.$t('home.placingApproved'),
        65: proxy.$t('home.AllotmentResultsApproved'),
        70: proxy.$t('home.TradingStarted'),
        80: proxy.$t('home.Suspended'),
        90: proxy.$t('home.Cancelled'),
    }[props.data.status as number];
});
const detailsItem33 = computed(() => {
    var tag = true;
    const arr = detailsItem.value.map(item => {
        if (code22.value == item.name && tag) {
            tag = false;
            return { ...item, icon: 2 };
        } else if (tag) {
            return { ...item, icon: 1 };
        } else {
            return { ...item, icon: 0 };
        }
    });
    return [
        {
            name: proxy.$t('home.DealInitiated'),
            icon: arr[0].icon,
        },
        {
            name: proxy.$t('home.PublicOfferClosed'),
            icon: arr[1].icon,
        },
        {
            name: proxy.$t('home.ApplicationValidated'),
            icon: arr[2].icon,
        },
        {
            name: proxy.$t('home.AllotmentConfirmed'),
            icon: arr[3].icon,
        },
        {
            name: proxy.$t('home.MoneySettlement'),
            icon: arr[4].icon,
        },
        {
            name: proxy.$t('home.AllocationConfirmed'),
            icon: arr[5].icon,
        },
        {
            name: proxy.$t('home.placingApproved'),
            icon: arr[6].icon,
        },
        {
            name: proxy.$t('home.AllotmentResultsApproved'),
            icon: arr[7].icon,
        },
        {
            name: proxy.$t('home.TradingStarted'),
            icon: arr[8].icon,
        },
    ];
});
function setCodefn() {
    var obj = {
        25: proxy.$t('home.DealInitiated'),
        30: proxy.$t('home.PublicOfferClosed'),
        35: proxy.$t('home.ApplicationValidated'),
        45: proxy.$t('home.AllotmentConfirmed'),
        50: proxy.$t('home.MoneySettlement'),
        55: proxy.$t('home.AllocationConfirmed'),
        60: proxy.$t('home.placingApproved'),
        65: proxy.$t('home.AllotmentResultsApproved'),
        70: proxy.$t('home.TradingStarted'),
        80: proxy.$t('home.Suspended'),
        90: proxy.$t('home.Cancelled'),
    };

    const stron = props.data.status;
    if (isValidKey(stron, obj)) {
        code22.value = obj[stron];
    }
    var tag = true;
    detailsItem.value = detailsItem.value.map(item => {
        if (code22.value == item.name && tag) {
            tag = false;
            return { ...item, icon: 2 };
        } else if (tag) {
            return { ...item, icon: 1 };
        } else {
            return { ...item, icon: 0 };
        }
    });

    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
    function isValidKey(key: string | number | symbol, object: object): key is keyof typeof object {
        return key in object;
    }
}

const cardDetail = (e: any) => {
    e.stopPropagation();
    expand.value = !expand.value;
};

//路由传参
const handleclick = (item: any) => {
    localStorage.setItem('ipoID', item.ipoID);
    //console.log(item);
    localStorage.setItem('itemData', JSON.stringify(item));
    router.push({
        name: 'Xdashboard',
        params: { data: JSON.stringify(item) },
    });
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
    .bigbox {
        width: 76vw;
        margin-top: 14px !important;
        cursor: pointer;
        
    }
}
</style>

<style lang="scss" scoped>
.bigbox {
    width: 100%;
    height: fit-content;
    margin-top: 30px;
    margin-left: calc(81vw / var(--screen) * -10);
    background-color: #e7efec;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #dde2e6;

    .list {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        font-family: 'Calibri';

        .list-content {
            margin-top: calc(70vh / var(--height) * 10);
            width: 230px;

            // height: 100%;
            .details {
                .icon1 {
                    margin-left: calc(81vw / var(--screen) * 3);
                    transform: translateY(calc(81vw / var(--screen) * 2.5));
                    cursor: pointer;
                }
            }

            h4 {
                font-size: calc(70vh / var(--height) * 20);
                color: #3b6181;
                margin-bottom: calc(70vh / var(--height) * 8);
                font-weight: 600;
                font-family: 'Calibri';
            }

            h5 {
                font-size: calc(70vh / var(--height) * 16);
                color: #4b6d8a;
                margin-bottom: calc(70vh / var(--height) * 8);
                font-weight: 400;
                font-family: 'Calibri';
            }

            h6 {
                font-size: calc(70vh / var(--height) * 12);
                color: #5e7e98;
                margin-bottom: calc(70vh / var(--height) * 8);
                // font-family: "Calibri";
            }
            .top {
                display: flex;
                justify-content: space-between;
            }
            .el-icon svg {
                width: 15px;
                height: calc(70vh / var(--height) * 15);
            }
            .el-icon {
                width: 15px;
                height: calc(70vh / var(--height) * 15);
                cursor: pointer;
            }
            .icon {
                @media screen and (max-width: 768px) {
                    width: 11rem;
                    height: 13rem;
                }
                width: calc(70vh / var(--height) * 11);
                height: calc(70vh / var(--height) * 13);
                cursor: pointer;
            }
        }
        @media (min-height: 1000px) {
    .list-content {
            margin-top: 10px;
            width: 230px;

            h4 {
                font-size: 20px;
                margin-bottom: 8px;
            }

            h5 {
                font-size:16px;
                margin-bottom: 8px;
            }

            h6 {
                font-size: 12px;
                margin-bottom: 8px;
            }
          
            .el-icon svg {
                width: 15px;
                height: 15px;
            }
            .el-icon {
                width: 15px;
                height: 15px;
            }
            .icon {
                width:  11px;
                height: 13px;
            }
        }
}
    }
}

</style>
